<template>
    <div id="shop_info">
        <div v-for="(item,index) in goodsInfo" :key="index" class="good_info" >
            <div class="check" @click="isCheck(index)">
                <img src="../../../assets/img/checked.png" v-show="$store.state.shopInfo[index].checked">
            </div>
            <div @click="GoToDetail(item.iid)">
                <img :src="item.image" alt="" class="good_img">
                <span class="good_title">{{item.title}}</span>
                <span class="good_price">{{item.price}}元</span>
                <span class="good_count">x{{item.count}}</span>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "ShopInfos",
        data(){
            return{
                goodsInfo:[],
            }
        },
        methods:{
            getGoodsInfo(){
                this.goodsInfo = this.$store.state.shopInfo;
                // console.log(this.goodsInfo)
            },
            GoToDetail(iid){
                this.$router.push({
                    path:'/detail',
                    query:{id:iid}
                })
            },
            //商品的选中状态
            isCheck(index){
                this.$store.state.shopInfo[index].checked = !this.$store.state.shopInfo[index].checked
            }
        },
        created() {
            this.getGoodsInfo()
        }
    }
</script>

<style scoped>
    #shop_info{
        width: 100%;
    }
    .good_info{
        width: 100%;
        border-bottom:  2px silver solid;
        position: relative;
    }
    .check{
        width: 22px;
        height: 22px;
        border: 1px silver solid;
        border-radius: 50%;
        position: absolute;
        text-align: center;
        top: 50%;
    }
    .check img{
        width: 22px;
        height: 22px;
    }
    .good_img {
        width: 100px;
        height: 130px;
        margin-left: 25px;
    }
    .good_title{
        position: absolute;
        top:15px;
        left: 130px;
    }
    .good_price{
        color: red;
        position: absolute;
        bottom:35px;
        right: 20px;
    }
    .good_count{
        position: absolute;
        bottom: 15px;
        right: 20px;
    }

</style>